<template>
  <div style="padding: 20px">
    <!-- 应收计划导入审批 -->
    <a-card :bordered="false" style="height: 800px">
      <a-form layout="inline" :model="formState" ref="formRef">
        <a-form-item label="申请时间" name="apply">
          <a-range-picker
            allowClear
            v-model:value="formState.apply"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="审批时间" name="approval">
          <a-range-picker
            allowClear
            v-model:value="formState.approval"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="审批人" name="approver">
          <a-input v-model:value="formState.approver" autocomplete="off" />
        </a-form-item>
        <a-form-item label="审批状态" name="status">
          <a-input v-model:value="formState.status" autocomplete="off" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click.prevent="onSubmit">查询</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        size="middle"
        :row-class-name="
          (_record: any, index: number) =>
            index % 2 === 1 ? 'table-striped' : null
        "
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 3000, y: 550 }"
        style="margin-top: 20px"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'active'">
            <a-button
              type="link"
              @click="onEdit(record, 1)"
              :disabled="record.status != 0"
              >同意</a-button
            >
            <a-button
              type="link"
              danger
              @click="onEdit(record, 2)"
              :disabled="record.status != 0"
              >拒绝</a-button
            >
          </template>
          <template v-if="column.dataIndex === 'document'">
            <a-button type="link" @click="document(record)">下载</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 同意 -->
    <a-modal
      v-model:open="isConsentOpen"
      width="1000px"
      title="操作审批"
      @ok="ConsentOk"
    >
      <a-textarea v-model:value="TextValue" placeholder="操作审批" :rows="4" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed } from 'vue';
import { getFileExamineList, submitFileExamine } from '#/api/core/planAudit';
import { message } from 'ant-design-vue';

const formState = reactive({
  apply: [], // 申请时间
  approval: [], // 审批时间
  approver: '', // 审批人
  status: '', // 审批状态
});
const formRef = ref();
const onSubmit = () => {
  getTableData();
  console.log(toRaw(formState));
};
const resetForm = () => {
  formRef.value.resetFields();
};
// 表格数据
const columns = ref([
  {
    title: '文件名',
    dataIndex: 'fileName',
    key: 'fileName',
    align: 'center',
  },
  {
    title: '申请人',
    dataIndex: 'createPersonName',
    key: 'createPersonName',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '附件',
    dataIndex: 'document',
    key: 'document',
    align: 'center',
  },
  {
    title: '审批状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    customRender: (text, record, index) =>
      text.record.status === 0
        ? '审批中'
        : text.record.status === 1
          ? '同意'
          : '拒绝',
  },
  {
    title: '审批人',
    dataIndex: 'examinePersonName',
    key: 'examinePersonName',
    align: 'center',
  },
  {
    title: '审批时间',
    dataIndex: 'examineTime',
    key: 'examineTime',
    align: 'center',
  },
  {
    title: '审批意见',
    dataIndex: 'examinecontent',
    key: 'examinecontent',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'active', // 这里的 dataIndex 必须和 dataSource 中的 key 一致
    key: 'active', // 这里的 key 必须和 dataSource 中的 key 一致
    align: 'center',
    fixed: 'right',
  },
]);
const dataSource = ref([]);

// 默认分页
const current = ref(1); // 当前页码
const pageSize = ref(10); // 每页条数
const total = ref(0); // 总条数
// 分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));
const handleTableChange = (pag: { current: number; pageSize: number }) => {
  console.log('分页参数', pag);
  current.value = pag.current;
  pageSize.value = pag.pageSize;
  getTableData();
};
// 同意
const isConsentOpen = ref(false);
const TextValue = ref(''); // 审批意见
const auditType = ref(''); // 审批状态
const rowData = ref({}); // 当前数据
const onEdit = (record: any, type: string) => {
  console.log(record);
  auditType.value = type;
  rowData.value = record;
  isConsentOpen.value = true;
  TextValue.value = '';
};
const ConsentOk = async (e: MouseEvent) => {
  console.log('审批', rowData);
  let data = {
    submitStatus: auditType.value,
    examineContent: TextValue.value,
    fileUrl: rowData.value.fileUrl + rowData.value.fileName,
    id: rowData.value.id,
  };
  let res = await submitFileExamine(data);
  console.log(res);
  if (res.data.code == 200) {
    message.success(res.data.msg || '审批成功');
  } else {
    message.error(res.data.msg || '审批失败');
  }
  isConsentOpen.value = false;
  TextValue.value = '';
};

// 获取表格数据
const getTableData = async () => {
  let data = {
    startTime: formState.apply?.[0] ?? '',
    endTime: formState.apply?.[1] ?? '',
    examineStartTime: formState.approval?.[0] ?? '',
    examineEndTime: formState.approval?.[1] ?? '',
    examinePersonId: formState.approver,
    status: formState.status,
    page: current.value,
    limit: pageSize.value,
  };
  let res = await getFileExamineList(data);
  if (res.data.code == 200) {
    dataSource.value = res.data.data;
    total.value = res.data.total;
  }
  console.log(res);
};
getTableData();
</script>

<style scoped></style>
